<template>
	<view class="content">
		<ProductSearch @search="search"></ProductSearch>

		<view class="list">
			<view class="card" v-for="(item, i) in productList" :key="i">
				<view class="datatitle" @click="productDetil(item)">
					<el-row type="flex" justify="space-between">
						<span>{{ item.number }}</span>
						<el-image :preview-src-list="[item.coverpath]" :src="item.coverpath" @click.stop :z-index="10"
							class="image" :preview-teleported="true"  />
					</el-row>
				</view>
			</view>
		</view>
		<el-button class="fixedBtn" type="primary" round @click="addBtn">+ {{$t(`global.record`)}}</el-button>
	</view>
</template>

<script lang="ts" setup>
import * as productApi from '@/service/api/hkb/product/index'
import { Navigate } from '@/utils';
import Storage from "@/modal/useStorage";
import ProductSearch from '../components/productSearch.vue'
const productList = ref()
const queryParams = ref<any>({
	number: '',
	goodsType: ''
})
const productDetil = (item: any) => {
	Storage.set('productDetail', {product: item, isAdd: false, isEdit: false})
	Navigate.to('/pages/hkb/product/detail')
}
const search = async (val?: string) => {
  queryParams.value.number = val
	const res = await productApi.getListAll(queryParams.value)
	productList.value = res
}
const addBtn = () => {
	Storage.set('productDetail', {product: null, isAdd: true, isEdit: false})
	Navigate.to('/pages/hkb/product/detail')
}
onLoad(param => {
	uni.setNavigationBarTitle({ title: param.typeName || '' })
	queryParams.value.goodsType = param.type
})
</script>

<style scoped lang="scss">
.list {
	padding: 0 20rpx;

	.card {
		padding-left: 20rpx;
		background: #fff;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 20rpx;
		border-radius: 6rpx;
		box-shadow: 0 2rpx 4rpx #bbb;
	}

	.datatitle {
		font-size: 26rpx;
		font-weight: 600;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
	}
}
</style>
